{% set id = (id ?? "time#{random()}") ~ '-time' -%}
{% set name = name ?? null -%}
{% set value = value ?? null -%}

{% do view.registerAssetBundle('craft\\web\\assets\\timepicker\\TimepickerAsset') -%}

<div class="timewrapper"
        {%- if block('attr') is defined %} {{ block('attr') }}{% endif %}>
    {%- include "_includes/forms/text" with {
        name: name ? "#{name}[time]" : null,
        autocomplete: false,
        size: 10,
        placeholder: ' ',
        value: (value ? value|time('short') : '')
    } -%}
    <div data-icon="time"></div>
    {% if name -%}
        {{ hiddenInput("#{name}[timezone]", craft.app.getTimeZone()) }}
    {%- endif -%}
</div>

{% set options = {
    minTime: minTime ?? null,
    maxTime: maxTime ?? null,
    disableTimeRanges: disableTimeRanges ?? null,
    step: minuteIncrement ?? null,
    forceRoundTime: forceRoundTime ?? false,
}|filter %}

{# include JSON_FORCE_OBJECT in the json_encode options #}
{% set jsonOptions = constant('JSON_HEX_TAG') b-or constant('JSON_HEX_AMP') b-or constant('JSON_HEX_QUOT') b-or constant('JSON_FORCE_OBJECT') %}

{%- js %}
    var $timePicker = $('#{{ id|namespaceInputId|e('js') }}');
    $timePicker.timepicker($.extend({{ options|json_encode(jsonOptions)|raw }}, Craft.timepickerOptions));

    {% if value and value.format is defined %}
        $timePicker.timepicker('setTime', {{ value.format('G') }}*3600 + {{ value.format('i') }}*60 + {{ value.format('s') }});
    {% endif %}
{%- endjs %}
